<template>
    <view class="container">
        <u-text
            text="选择收款方式"
            color="#888888"
            size="26rpx"
            margin="0 0 0 14rpx"
        ></u-text>
        <u-row
            justify="space-between"
            gutter="20"
            customStyle="flex-wrap: wrap;margin-top: 30rpx"
        >
            <u-col
               :span="4"
               customStyle="height: 105rpx"
               v-for="item in platformList"
               :key="item.id"
            >
                <view
                    class="platform-item"
                    :class="item.id === queryForm.platformId? 'platform-action':null"
                    @click="actionPlatform(item.id)"
                >
                    <u-icon
                        :name="item.icon"
                        width="46rpx"
                        height="46rpx"
                    ></u-icon>
                    <u-text
                        :text="item.name"
                        color="#000000"
                        size="26rpx"
                        margin="0 0 0 10rpx"
                    ></u-text>
                </view>
            </u-col>
        </u-row>
        <view class="label-2">
            <u-text
                text="输入收款姓名"
                color="#888888"
                size="26rpx"
                margin="0 0 0 14rpx"
            ></u-text>
            <!--u-text
                text="* 需与实名账号一致"
                color="#356CE7"
                size="24rpx"
                align="right"
            ></u-text-->
        </view>
        <u-input
            placeholder="请输入收款姓名"
            border="none"
            v-model="queryForm.payee"
            fontSize="34rpx"
            color="#000000"
            :customStyle="{
                padding: '25rpx 32rpx',
                background: '#F8F8F8'
            }"
        ></u-input>
        <u-text
            text="输入收款账号"
            color="#888888"
            size="26rpx"
            margin="60rpx 0 21rpx 14rpx"
        ></u-text>
        <u-input
            placeholder="输入收款账号"
            border="none"
            v-model="queryForm.account"
            fontSize="34rpx"
            color="#000000"
            :customStyle="{
                padding: '25rpx 32rpx',
                background: '#F8F8F8'
            }"
        ></u-input>
        <view class="bottom">
            <u-button
                text="保存"
                :customStyle="{
                height: '90rpx',
                background: '#000000',
                fontSize: '30rpx',
                color: '#FFFFFF'
               }"
               @click="savePayment"
            ></u-button>
        </view>
    </view>
</template>

<script>
    import { getPaymentInfo, savePaymentData, getPlatformPaymentData } from "@/config/api"
    export default {
        name: "index",
        data() {
            return {
                queryForm: {
                    payee: null,
                    account: null,
                    platformId: null
                },
                platformList: [],
                paymentInfo: {},
                id :null,
                type: null
            }
        },
        async onLoad(option) {
            this.platformList = await getPlatformPaymentData()
            if (this.platformList.length > 0) {
                this.queryForm.platformId = this.platformList[0].id
            }
            if (option.id) {
                this.queryForm = await getPaymentInfo(option.id)
            }
            this.type = option.type
        },
        methods: {
            async savePayment() {
                const res = await savePaymentData(this.queryForm)
                if (this.type == 'select') {
                    this.$store.dispatch("user/setPayment", res)
                }
                uni.$u.toast('保存成功')
                uni.$u.route({
                    type: "navigateBack"
                })
            },
            actionPlatform(id) {
                this.queryForm.platformId = id
            }
        }
    }
</script>

<style lang="scss" scoped>
    .container {
        padding: 70rpx 32rpx 0 32rpx;
        .platform-item {
            display: flex;
            flex: 1;
            align-items: center;
            justify-content: center;
            height: 75rpx;
            border: 1px solid #B6B6B6;
            padding-left: 40rpx;
            margin-bottom: 30rpx;
        }
        .platform-action {
            border: 1px solid #000000;
            background: url("https://img.ionepin.com/476f0d933a4ace44c43e23a86760085b34446d29.png") no-repeat bottom right;
            background-size: 48rpx 38rpx;

        }
        .label-2 {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: 40rpx;
            margin-bottom: 21rpx;
        }
        .bottom {
            position: fixed;
            left: 0;
            right: 0;
            bottom: 0;
            padding: 20rpx 20rpx calc(var(--window-bottom) + 33rpx) 20rpx;
        }
    }
</style>
